<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>FASHION-MAI</title>
<link rel="stylesheet" href="/css/ui-lightness/jquery-ui-1.8.14.custom.css" type="text/css" media="screen" />
<style type="text/css">
	A:link {text-decoration: none; color: black;}
	A:visited {text-decoration: none; color: black;}
	A:active {text-decoration: none; color: black;}
	A:hover {text-decoration: none; color: red;}
	
	#topMenu {color:white; height: 30px; line-height: 30px; background-color: black;}
	#search { font-size:12px; font-weight:bolder; text-align: center;}
	#center	{ width:70%; margin-left: 15%; margin-top: 0px;}
	table{text-align: center; font-size: 14px;}
	tr{height: 25px;}
	td{width:200px;}
	
	#insert-dialog-form {font-size: 12px; font-weight:bolder;}
	#select-dialog-form {font-size: 12px; font-weight:bolder;}
</style>

<script src=" /js/jquery-1.4.2.min.js" ></script>
<script src="/js/jquery-ui-1.8.14.custom.min.js"></script>
<script src="/js/jquery.ui.datepicker.js"></script> 
<script type="text/javascript">

$(function(){
    $("a:not(:eq(0))").click(function(event){
    	event.preventDefault();
    	var pageNum = $(this).attr("href").split("=")[1];
    	$("#fm").find("[name=pageNo]").val(pageNum);
    	$("#submit")[0].click();
    });
}); 

$(document).ready(function(){
    	$(".overEventColor").hover(over, out);
		
    	function over(event)
    	{
    		$(this).css("background-color", "yellow");
		    $(this).css("cursor", "pointer"); 
		}
		
		function out(event) 
		{
	 		$(this).css("background-color", "white");
		}
		
		$("[name=orderDate]","#insert-form").datepicker({
    		monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
		    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
    		dateFormat: 'yy-mm-dd',
		    prevText: '이전달',
		    nextText: '다음달',
		    changeMonth: true,
		    changeYear: true,
		});
		
		//등록 다이얼로그
		$("#insert-dialog-form").dialog({
			autoOpen: false,
			height: 350,
			width: 920,
			modal: true,
			buttons : {
				"ok" : function(){
					if($("[name='fabric']").val() == null || $("[name='fabric']").val() == '')
					{
						alert(" 원단입력하세요 ");
						return;
					}
					if($("[name='color']").val() == null || $("[name='color']").val() == '')
					{
						alert(" 색상입력하세요 ");
						return;
					}
					if($("[name='updater']").val() == null || $("[name='updater']").val() == '')
					{
						alert(" 등록/수정 하시는분 성함 입력하세요. ");
						return;
					}
					if($("[name='orderDate']").val() == null || $("[name='orderDate']").val() == '')
					{
						alert(" 날짜  입력하세요. ");
						return;
					}
					if(isNaN(new Number(new String($("[name='stockCount']").val()))))
					{
						alert("재고수량 숫자만 입력하세요");
						return;
					}
					if(isNaN(new Number(new String($("[name='saving']").val()))))
					{
						alert("절수 숫자만 입력");
						return;
					}
					if(isNaN(new Number(new String($("[name='yards']").val()))))
					{
						alert("yards 숫자만 입력");
						return;
					}
					$("#insert-form").submit();
					$(this).dialog("close");
				}
			},
			Cancel: function(){
				$(this).dialog("close");
			},
			close : function(){
				$(".insert-form-main").val("");
				
			}
		});//--등록 다이얼로그
		
		//조회 다이얼로그
		$("#select-dialog-form").dialog({
			autoOpen: false,
			height: 600,
			width: 1000,
			modal: true,
			buttons : {
				"ok" : function(){
					selectRemove();
					$(this).dialog("close");
				}
			},
			close: function(){
				selectRemove();
			}
		});//--조회 다이얼로그
});

function selectRemove(){
	$("#resultFabricSub").find('tr').not($("#resultFabricSub").find('tr').eq(0)).remove();
	$("#resultFabricSub").find('td').not($("#resultFabricSub").find('tr').find('td')).remove();
	$("#history").find('tr').not($("#history").find('tr').eq(0)).remove();
	$("#history").find('td').not($("#history").find('tr').find('td')).remove();
	$("#etc").text("");
}

$(function(){
	var dates = $( "#firstDate, #lastDate" ).datepicker({
			monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
		    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
		    dateFormat: 'yy-mm-dd',
		    prevText: '이전달',
		    nextText: '다음달',
		    changeMonth: true,
		    changeYear: true,
		    autoSize:true,
		    showOn: "button",
		    buttonImage: '/css/ui-lightness/images/calendar.gif',
		    buttonImageOnly: true,
		onSelect: function( selectedDate ) {
			var option = this.id == "firstDate" ? "minDate" : "maxDate",
				instance = $( this ).data( "datepicker" ),
				date = $.datepicker.parseDate(
					instance.settings.dateFormat ||
					$.datepicker._defaults.dateFormat,
					selectedDate, instance.settings );
			dates.not( this ).datepicker( "option", option, date );
		}
	});	
});



//버튼이벤트
$(function(){
	$("#submit").button({
		icons: {
            primary: "ui-icon-search"
        }
	}).click(function(){
		$("#fm").submit();
	});

	$("#insert-plus").click(function(){
		$('<br /><span>색상: <input type="text" size="14" name="color" maxlength="10" /> 절수: <input type="text" size="10" name="saving" maxlength="10" /> yards: <input type="text" size="10" name="yards" maxlength="10" /></span>')
		.appendTo($("#fabricSub"));
	});
	
	$("#insert-minus").click(function(){
		if($("#fabricSub").find('span').length > 2)
		{
			$("#fabricSub").find('span').last().remove();
			$("#fabricSub").find('br').last().remove();
		}
		else return;
	});
	
	$("#insert").button({
		icons: {
            primary: "ui-icon-circle-plus"
        }
	}).click(function(){
		$("#insert-form").removeAttr("action").attr("action","fabricInsert.do");
		$("[name='fabric']").removeAttr("readonly");
		$("#insert-dialog-form").dialog("open");
	});
	
	$("#update").button({
		icons: {
            primary: "ui-icon-circle-check",
       	}
	}).click(function(){
		var temp = $("[name='radio']:checked").val();
		if(typeof temp == "undefined")
		{
			alert("choice, please...");
			return;
		}
		
		$("#insert-form").removeAttr("action").attr("action","fabricUpdate.do");
		var fabric = $.trim($("[name='radio']:checked").parent().parent().find(" td").eq(1).text());
		$("[name='fabric']").attr("readonly","readonly");
		$.ajax({
			url: "fabricSelect.do",
			type : "post",
			data:{ fabric : fabric },
			success: function(msg){
				var obj = JSON.parse(msg);
				$("[name='fabric']").val(obj.fabric);
				$("[name='stockCount']").val(obj.stockCount);
				$("[name='customer']").val(obj.customer);
				$("[name='orderDate']").val(obj.orderDate);
				$("[name='location']").val(obj.location);
				$("[name='etc']").val(obj.etc);
				$.each(obj.subList, function(i,val){
					if(i == 0)
					{
						$("[name='color']").val(val.color);
						$("[name='saving']").val(val.saving);
						$("[name='yards']").val(val.yards);
					}
					else
					{
						$('<br /><span>색상: <input type="text" size="14" name="color" maxlength="10" value='+val.color+' /> 절수: <input type="text" size="10" name="saving" maxlength="10" value='+val.saving+' /> yards: <input type="text" size="10" name="yards" maxlength="10" value='+val.yards+' /></span>')
						.appendTo($("#fabricSub"));
					}
				});
				$("#insert-dialog-form").dialog("open");	
			}
		});
	});
	
	$("#delete").button({
		icons: {
            primary: "ui-icon-circle-minus"
        }
	}).click(function(){
		var temp = $("[name='radio']:checked").val();
		if(typeof temp == "undefined")
		{
			alert("choice, please...");
			return;
		}
		var no = $.trim($("[name='radio']:checked").parent().parent().find("td").eq(1).text());
		$.ajax({
			url: "fabricDelete.do",
			type : "post",
			data:{ fabric : no },
			success: function(){
				location.href = "http://fashionmai.iisweb.co.kr/fabricMain.do";
				//location.href = "http://localhost:8080/fabricMain.do";
			}
		});
	});
});

$(function(){	//상세보기
	$(".overEventColor").dblclick(function(){
		var fabric = $.trim($(this).find('td').eq(1).text());
		$("#select-dialog-form").dialog("open");
		$.ajax({
			url: "fabricSelect.do",
			type : "post",
			data:{ fabric : fabric },
			success: function(msg){
				var obj = JSON.parse(msg);
				$("#etc").text(obj.etc);
				
				$.each(obj.subList, function(i,val){
					$('<tr><td>'+ val.color +'</td><td>'+ val.saving +'</td><td>'+ val.yards +'</td></tr>')
					.appendTo($("#resultFabricSub"));	
				});
				
				$.each(obj.historyList, function(i,val){
					$('<tr><td>'+ val.updateDate +'</td><td>'+ val.stockCount +'</td><td>'+ val.updater +'</td></tr>')
					.appendTo($("#history"));	
				});
			}
		});	
	});
});	

</script>
</head>
<body>
	
	<div id="topMenu">  
		<span>
			원단 내역서 |
			<a href="firstPage.do">처음으로</a>
		</span>
	</div>
	
	<div id="search">
		<p>
			<form id="fm" action="fabricMain.do" method="post">
				구매날짜 : <input type="text" id="firstDate" name="firstDate" readonly="readonly" value="${fabricMain.firstDate}" /> ~ <input type="text" id="lastDate" name="lastDate" readonly="readonly" value="${fabric.lastDate}" />&nbsp;&nbsp;
				원단 : <input type="text" name="search_fabric" value="${fabricMain.search_fabric}" size="10" maxlength="12" />&nbsp;&nbsp;
				구매처 : <input type="text" name="search_costomer" value="${fabricMain.search_costomer}" size="10" maxlength="12" />&nbsp;&nbsp;
					   <input type="hidden" name="pageNo" value="${fabricMain.pageNo}" />
					   <button id="submit" style="font-size: 10px">search</button>		      
			</form>
		</p>
	</div>
	
	
	<div id="center">
		<table border="0" align="center">
			<tr style="background-color: gray; color:white;">
				<td style="width:30px;">◎</td>
				<td><B>원단명</B></td>
				<td><B>재고수량</B></td>
				<td><B>구매처</B></td>
				<td><B>구매날짜</B></td>
				<td><B>소재처</B></td>
				<td><B>최근 수정일</B></td>
			</tr>
			<c:forEach var="list" items="${fabricList}">
				<tr class="overEventColor">
					<td style="width:30px;"> <input type="radio" name="radio"/> </td>
					<td> ${list.fabric } </td>
					<td> ${list.stockCount }</td>
					<td> ${list.customer } </td>
					<td> ${list.orderDate } </td>
					<td> ${list.location } </td>
					<td> ${list.lastUpdate } </td>
				</tr>
			</c:forEach>
			<tr style="height: 3px;">
				<td colspan="8" style="text-align: center; background-color: gray;"> </td>
			</tr>
			<tr>
				<td align="right" colspan="8" style="font-size: 10px">
					<button id="insert"> 등록 </button>
					<button id="update"> 수정 </button>
					<button id="delete"> 삭제 </button>
				</td>
			</tr>
			<tr>
				<td colspan="8" style="text-align: center;">${pasing}</td>
			</tr>
		</table>
	</div>
	
	<div id="insert-dialog-form" title="원단 내역 입력">
		<form id="insert-form" action="fabricInsert.do" method="post">
			<fieldset>
			<table>
				<tr>
					<td style="width: 500px;" valign="top" align="left">
						<div>
							<span>원단명: <input class="insert-form-main" type="text" name="fabric" maxlength="10" /></span>
							<span>재고수량: <input class="insert-form-main" type="text" name="stockCount" maxlength="10" /></span>
						</div>
						
						<div>
							<span>구매처: <input class="insert-form-main" type="text" name="customer" maxlength="10" /></span>
							<span>구매날짜: <input class="insert-form-main" type="text" name="orderDate" readonly="readonly" /></span>
						</div>
						
						<div>
							<span>소재지: <input class="insert-form-main" type="text" name="location" maxlength="5" /></span>
							<span>등록자: <input class="insert-form-main" type="text" name="updater" maxlength="5" /></span>
						</div>
						
						<div id="fabricSub">
							<span>
								    색상: <input class="insert-form-main" type="text" size="14" name="color" maxlength="10" />
								    절수: <input class="insert-form-main" type="text" size="10" name="saving" maxlength="10" />
								  yards: <input class="insert-form-main" type="text" size="10" name="yards" maxlength="10" />
							</span>
							<span>
								<input type="button" id="insert-plus" value="+" />
								<input type="button" id="insert-minus" value="-" />
							</span>
						</div>
					</td>	
					
					<td valign="top">	
						<div>	
							etc <br /> <textarea class="insert-form-main" name="etc" rows="10" cols="60"></textarea>
						</div>
					</td>
				</tr>
			</table>	
			</fieldset>	
		</form>
	</div>
	
	<div id="select-dialog-form" title="원단 내역 조회">
		<fieldset>
			<table border="1">
				<tr>
					<td style="width: 500px;" valign="top" align="left">
						<div style="height:200px; overflow: auto;">	
							<table id="resultFabricSub">
								<tr style="background-color: black; color:white;">
									<td> 색상 </td>
									<td> 절수 </td>
									<td> yards </td>
								</tr>
							</table>
						</div>
					</td>	
					<td valign="top" rowspan="2" align="left" style="width:500px;">	
						<div style="height:400px; overflow: auto;">
							<div style="background-color: black; color:white">update history...</div>
							<table id="history">
								<tr style="background-color: gray; color:white;">
									<td> 날짜 </td>
									<td> 절수 </td>
									<td> 수정자 </td>
								</tr>
							</table>
						</div>
					</td>
				</tr>
				<tr>
					<td style="width: 500px;" valign="top" align="left">
						ETC...<br />
						<textarea style="overflow-x:hidden; overflow-y:auto;" id="etc" rows="10" cols="70" readonly="readonly"></textarea>
					</td>
				</tr>
			</table>	
		</fieldset>	
	</div>
	
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
</body>
</html>